<template>
  <view class="w100p pr common_wrap">
    <CommonHeader :title="$t('供应商报价')" color="#fff" backgroundColor="rgba(0,0,0,1)" :is-right="false" :isGoApp="true"></CommonHeader>

    <view class="w100p flex-item oh">
      <scroll-view scroll-y class="w100p scroll-Y">
        <view class="w100p swiper_video" :style="{ top: +statusBarHeight + 44 + 'px' }">
          <swiper class="w100p swiper" circular :indicator-dots="true" indicator-color="#9B969A"
            indicator-active-color="#fff" :circular="true">
		
            <swiper-item v-if="!!allInfo.faQuotation.productVideoUrls">
              <view class="pr video_wrap">
                <video id="myVideo" class="w100p  palyxxx" :src="allInfo.faQuotation.productVideoUrls" :show-center-play-btn="true"
                  object-fit="cover" play-btn-position="center" :controls="true" :autoplay="true" muted
                  :poster="currntMainPic">
                </video>
                <view class="video-wrapxx">
                  <image :src="currntMainPic" mode="aspectFill"></image>
                </view>
                <cover-view v-show="isShow" class="pa play_wrap" @click="playsHeader(currentVideo)">
                  <view class="icon_wrap">
                    <u-icon name="play-right-fill" color="#fff" size="46"></u-icon>
                  </view>
                </cover-view>
              </view>
            </swiper-item>
            <swiper-item v-show="allInfo.faQuotation.productImgUrls" v-for="(item, index) in allInfo.faQuotation.productImgUrls.split(',')" :key="index">
              <image class="w100p" :src="getImageUrl(item)" mode="aspectFill" @click="amplifyImg(item)"></image>
            </swiper-item>
          </swiper>
          <cover-view v-show="isShow" class="pa history_wrap">
            <u-notice-bar class="w100p" mode="vertical" :is-circular="false" :volume-icon="false" type="none"
              :list="historyList" font-size="22" duration="5000"></u-notice-bar>
          </cover-view>
        </view>
        <view :style="{ marginTop: getTopR() }"></view>
        <view class="common_content pr w100p">
          <view class="w100p shop_card ">
            <view class="content-w">
              <!-- 基础信息 -->
              <view class="base-info">
                <view class="left-avatar">
                  <view class="avatar-w">
                    <view class="avatar">
                      <image :src="getImageUrl(allInfo.avatar)" mode="aspectFill"></image>
                    </view>
                    <view class="country">
						          <flag :country="allInfo.country" />
                      <!-- <image src="/static/caigou/ru.png" mode="aspectFill"></image> -->
                    </view>
                  </view>
                  <view class="desc-avatar">
                    <view class="show">
                      <view :class="langR =='ru'?'name r_ellipsis_one':'name ellipsis_one'">{{allInfo[plangJava('username')]}}</view>
                      <view class="vip-leval">
                        <view class="circle">
                          <image v-if="allInfo.vipLevel == 0" src="@/static/detail/vip_1.png" mode="scaleToFill" />
                          <image v-if="allInfo.vipLevel == 1" src="@/static/detail/vip_2.png" mode="scaleToFill" />
                          <image v-if="allInfo.vipLevel == 2" src="@/static/detail/vip_3.png" mode="scaleToFill" />
                          <image v-if="allInfo.vipLevel == 3" src="@/static/detail/vip_4.png" mode="scaleToFill" />
                        </view>
                        <text>VIP</text>
                      </view>
                    </view>
                    <view class="flex-start mt-15">
                    	<view class="" v-for="(it, ind) in scoreList">
                    		<image v-if="it.num <= allInfo.rating" class="ml-8 w-25 h-25"
                    			src="/static/img/starBright.png"></image>
                    		<image v-else class="ml-8 w-25 h-25" src="/static/img/starDark.png"></image>
                    	</view>
                    </view>
                  </view>
                </view>
              
              </view>
              <view class="bottom-yewu">
                <view class="title">{{$t('主营业务')}}</view>
                <view class="desc">
                  <!-- {{allInfo.mainProduct}} -->
                  {{allInfo[plangJava('mainProduct')]}} 
                </view>
              </view>
            </view>
          </view>
          <cover-view class="pa swiper_wrap"></cover-view>
        </view>
        <!-- 采购 -->
        <view class="wrapper-info pr">


          <!-- 当前报价 -->
          <view class="current-price">
            <view class="txt">{{$t('当前报价')}}</view>
            <view class="price">
              {{get(allInfo, 'faQuotation.currency')}}<text class="ml-10">{{ get(allInfo, 'faQuotation.price') }}</text>
            </view>
          </view>

          <!-- 采购信息 -->
          <view class="caigou-info">
            <view class="title">
              <view class="name">{{$t('参与信息')}}</view>
              <view class="status">{{ get(allInfo, 'faQuotation.status') == '1' ? $t('已成交') : $t('已发布') }}</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('商品名称')}}</view>
              <view class="txtContent">{{ get(allInfo, `faQuotation.${plangJava('productName')}`) }}</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('商品品牌')}}</view>
              <view class="txtContent">{{ get(allInfo, `faQuotation.${plangJava('productBrand')}`) }}</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('商品报价（总价）')}}</view>
              <view class="txtContent">{{ get(allInfo, 'faQuotation.price') }}</view>
            </view>
           <!-- <view class="list">
              <view class="txt">{{$t('商品')}}报价（单价）</view>
              <view class="txt">{{ get(allInfo, 'faQuotation.ruble') }}</view>
            </view> -->
            <view class="list">
              <view class="txt">{{$t('发货地址')}}</view>
              <view class="txtContent">{{ get(allInfo, `faQuotation.${plangJava('address')}`) }}</view>
            </view>
           <!-- <view class="list">
              <view class="txt">保证金额</view>
              <view class="txt">{{ get(allInfo, 'faQuotation.address') }}</view>
            </view> -->
            <view class="list">
              <view class="txt">{{$t('生产周期（天）')}}</view>
              <view class="txtContent">{{ get(allInfo, 'faQuotation.productDuration') }}</view>
            </view>
           <!-- <view class="list">
              <view class="txt">发货时间</view>
              <view class="txt">{{ get(allInfo, 'faQuotation.productDuration') }}</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('是')}}{{$t('否')}}含运费</view>
              <view class="txt">{{ get(allInfo, 'faQuotation.productDuration') }}</view>
            </view> -->

          </view>
          <!-- 图片列表  -->
          <view class="w100p ">
            <view style="height: 16rpx;"></view>
            <view class="w100p shop_introduce">
              <view class="title">{{$t('商品简介')}}</view>
              <u-parse :html="get(allInfo, `faQuotation.${plangJava('description')}`)"></u-parse>
            </view>

          </view>
          <!-- 商品其他文件 -->
          <view class="file-wrap">
            <view class="w100p big_title">
              {{$t('商品相关文件')}}
            </view>
            <scroll-view scroll-x class="scrolxxx-wwww">
              <view v-if="get(allInfo, 'faQuotation.productOtherFileUrls')" class="w100p scrolxxx">
                <image v-for="(item, index) in get(allInfo, 'faQuotation.productOtherFileUrls').split(',')"  class="goback_img" :src="getImageUrl(item)" mode="aspectFill" @click="amplifyImg(item)"
                  :key="index"></image>
              </view>
            </scroll-view>
          </view>

          <view style="height: 16rpx;"></view>

        </view>
      </scroll-view>
    </view>


    <!-- 底部导航栏 -->
    <view v-if="get(allInfo, 'faQuotation.status') == '0'"  class="footer-nav">
      <view class="footer-wrapper">
        <!-- <view class="btn warning">{{$t('不感兴趣')}}</view> -->
        <view class="btn blue" @click="callPhone">{{$t('拨打视频通话')}}<image
								src="/static/translatexx.png"
								class="translatexxxxxx"
								mode="widthFix"
							/></view>
		<!-- onParticipate -->
        <view class="btn lvse" @click="showPop = true">{{$t('成交商品')}}</view>
      </view>
    </view>


    <!-- 播放视频 -->
    <uni-popup ref="popupVideo" type="center" background-color="#000" mask-background-color="#000" class="popvexxx">
      <view class="wrapper-video">
        <video id="mainVideo" :src="playVideo" :show-center-play-btn="true" object-fit="cover"
          play-btn-position="center" :controls="true" :autoplay="true" class="video-main" :show-fullscreen-btn="false">
        </video>
      </view>
    </uni-popup>

    <!-- 图片放大 -->
    <uni-popup ref="popup" class="common_pop" mask-background-color="rgba(0,0,0,1)">
      <view class="w100p">
        <image class="w100p" :src="commonImg" mode="widthFix" @click="closePop"></image>
      </view>
    </uni-popup>
	
	<u-popup v-model="showPop" length="35%" mode="bottom" border-radius="26">
		<p class="fz34 font-bold mt-36 mb-26" style="color: #262728; text-align: center;">{{$t('请选择发货方式')}}</p>
		<!-- <u-radio-group class="flex flex-col mt-20" v-model="mailingType">
			<u-radio 
				@change="radioChange" 
				v-for="(item, index) in mailingList"
				:key="item.key" 
				:name="item.key"
				class="mt-10"
			>
				{{item.name}}
			</u-radio>
		</u-radio-group> -->
		<view class="flex-col center">
			<view class="commonSty" :class="{'activeSty': currentRadio == 1}" @click="radioChange(1)">
				<p>{{$t('自提')}}</p>
			</view>
			<view class="commonSty mb-30" :class="{'activeSty': currentRadio == 2}" @click="radioChange(2)">
				<p>{{$t('卖家发货')}}</p>
			</view>
		</view>
		
		<button class="confirmBtn" @click="confirmType">{{$t('确认')}}</button>
	</u-popup>
	
	<u-modal :confirm-text="$t('确定')" :show-title="false" :cancel-text ="$t('取消')"  class="modalSty" v-model="confirmModal" :content="$t('是否确认成交？')" :showCancelButton="true" @cancel="confirmModal = false" @confirm="onParticipate"></u-modal>
	<!-- <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup> -->
	
  </view>
</template>

<script>
import {
  mapState
} from 'vuex';
import {
  IMAGE_URL,
} from "@/config/app"

import CommonHeader from "@/pages/components/common-header.vue";
import { faQuotationgetQuotation, dealPurchaseInfo } from "@/api/caigou.js"
import { request_minute } from '@/api/basic'

export default {
  data() {
    return {
      statusBarHeight: uni.getStorageSync("statusBarHeight"),
      videos: null, // 播放ref
      playVideo: '',
      commonImg: '',
      currntMainPic: '',
	  confirmModal: false,
	  mailingType: '',
	  currentRadio: 0,
	  mailingList: [
			{
				name: this.$t('自提'),
				key: 1
			},
			{
				name: this.$t('卖家发货'),
				key: 2
			}
		],
      currentVideo: '',
	  showPop: false,
      isShow: true,
      historyList: [], //浏览记录列表
      list: [],
      product: {},
	  allInfo: {},
	  scoreList: [{
			num: 1
		  },
		  {
			num: 2
		  },
		  {
			num: 3
		  },
		  {
			num: 4
		  },
		  {
			num: 5
		  },
	  ],
	  purshId: '',
	  IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/'
    }
  },
  components: {
    CommonHeader,
  },
  methods: {
    // 获取图片第一张
   stringToArray(str) {
            if (typeof str !== 'string') return []; // 非字符串返回空数组
            return str.includes(',') ? str.split(',') : [str];
          },
	  radioChange(e) {
		  // console.log('eee', e)
		  this.currentRadio = e
		  this.mailingType = e
	  },
	  callPhone() {
	  	// return
	  	if(uni.getStorageSync("user_id") == this.allInfo.faQuotation.userId) {
	  		uni.showToast({
	  			title: this.$t('不能给自己打电话'),
	  			icon: "none",
	  		});
	  	} else {
	  		request_minute({
	  			user_id: uni.getStorageSync("user_id"),
	  			target_id: this.allInfo.faQuotation.userId,
	  		}).then(res => {
	  			if (res.data.data.flag == 1) {
	  				this.isMessageGo({
	  					action: 'call',
	  					data: {
	  						userId: this.allInfo.faQuotation.userId,
	  						type: res.data.data.type || 1,
	  					}
	  				})
	  			} else {
	  				uni.showToast({
	  					title: this.$t('积分不足，请充值积分'),
	  					icon: "none",
	  				});
	  				setTimeout(() => {
	  					uni.navigateTo({
	  						url: '/pages/vip/scorePoint',
	  						webview: 'zWebView'
	  					})
	  				}, 500)
	  			}
	  		})
	  	}
	  },
	  faQuotationgetQuotation(id, quotationUserId) {
		  uni.showLoading({
		  	title: this.$t('加载中')
		  });
		  faQuotationgetQuotation({ purchaseInfoId: id, quotationUserId: quotationUserId }).then(res => {
			  if(res.code == 0) {
				  this.allInfo = res.data || {}
				  this.currentVideo = res.data.faQuotation.productVideoUrls || ''
          this.currntMainPic = this.stringToArray(res.data.faQuotation.productImgUrls)[0] 
         
          


          console.log(this.currntMainPic,'sldksl;dk;lskd')
        } else {
				  // uni.$u.toast(res.msg)
          uni.$u.toast(res[this,plang('msg')])
			  }
			  uni.hideLoading()
		  })
	  },
	  confirmType() {
		  if(this.mailingType){
			  this.showPop = false
			  this.confirmModal = true
		  } else {
			  uni.$u.toast(this.$t('请选择发货方式'))
		  }
	  },
    // 成交商品
    onParticipate() {
		uni.showLoading({
			title: this.$t('加载中')
		});
		const params = { 
			purchaseInfoId: this.purshId,
			quotationUserId: this.allInfo.faQuotation.userId,
			mailingType: this.mailingType
		}
		console.log('this.allInfo000', this.allInfo)
		console.log('00000', params)
		// return
		dealPurchaseInfo(params).then(res => {
			console.log('res---', res)
			if (res.code == 0) {
        uni.showToast({
          title: this.$t('成交成功'),
          icon: 'success',
          duration: 2000
        })
        setTimeout(() => {
				 uni.redirectTo({ 
				    url: '/pages/caigou/order/index',
				  })
        }, 800)
			}
			uni.hideLoading()
		})
     
    },
    getTopR() {
      return `calc(${+this.statusBarHeight}px + 44px + 400rpx)`
    },
    // 播放头部视频
    playsHeader(video) {
      // 判断安卓
      const systemInfo = uni.getSystemInfoSync();
      // 判断是否为 Android 系统
      if (systemInfo.platform === 'android') {
        this.playVideo = video;
        this.$refs.popupVideo.open()
        return;
      }
      this.videos.requestFullScreen();
      this.$nextTick(() => {
        this.videos.play();
      })
    },
    // 关闭图片弹窗
    closePop() {
      this.$refs.popup.close();
    },
    // 图片放大
    amplifyImg(imgUrl) {
      if (!imgUrl) return;
      this.commonImg = imgUrl;
      this.$refs.popup.open();
    },
    // 获取数据
    // async getData() {
    //   const { data } = await this.$u.api.shopping.getProduct({
    //     id: 338,
    //   });
    //   this.currntMainPic = data.product.pic;
    //   this.list = [data.product.pic, data.product.pic, data.product.pic];
    //   this.currentVideo = data.product.video;
    //   this.product = data.product;
    // },
    // 浏览记录列表
    // async getHistoryData() {
    //   try {
    //     const {
    //       data
    //     } = await this.$u.api.shopping.getMemberHistory({
    //       id: 338,
    //       type: "shop",
    //     });
    //     this.historyNum = data.member_history_count || 0;
    //     if (!!data.member_history?.length) {
    //       let arr = [];
    //       data.member_history.map((item, index) => {
    //         let str = item[this.plang('username')] + this.$t("正在查看");
    //         arr.push(str)
    //       })
    //       this.historyList = [...arr];
    //     }
    //   } catch (e) {

    //   }
    // },
  },

  onLoad(options) {
    this.videos = uni.createVideoContext('myVideo');
	if(options.id || options.quotationUserId) {
		this.purshId = options.id
		this.faQuotationgetQuotation(options.id, options.quotationUserId)
	}
    // this.getData();
    // this.getHistoryData();
  },
}
</script>

<style scoped lang="scss">
@import './index.scss';
	@import '@/assets/appScss.scss';
	.commonSty {
		width: 90%;
		height: 94rpx;
		border-radius: 18rpx;
		background-color: #fff;
		color: #333;
		font-size: 32rpx;
		text-align: center;
		line-height: 94rpx;
		margin-top: 24rpx;
	}
	.activeSty {
		width: 90%;
		height: 94rpx;
		border-radius: 18rpx;
		background-color: #278AFF;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 94rpx;
	}
	/deep/ .uni-scroll-view {
		background: linear-gradient(360deg, #FFFFFF 0%, #E7F2FF 100%);
	}
	/deep/ .uni-scroll-view-content {
		overflow: hidden;
	}
	
	.confirmBtn {
		margin-left: 24rpx;
		margin-right: 24rpx;
		height: 90rpx;
		// background-color: #06C36E;
		background: linear-gradient(180deg, #4BADFD 0%, #2B61EB 100%);
		color: #fff;
		font-size: 28rpx;
		font-weight: 600;
		line-height: 90rpx;
		margin-top: 20rpx;
	}
	.modalSty {
		text-align: center;
	}
  .r_ellipsis_one{
    // display: block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>